<template>
  <a-layout class="layout">
    <a-layout-header class="header">
      <a-space>
        <a-input-search
          v-model:value="queryField.neuron"
          placeholder="输入点什么"
          :loading="loading"
          enter-button
          @change="query"
          style="margin-top: 16px; width: 270px"
        />
        <a-button @click="showModel('add')">
          <template #icon><plus-outlined /></template>添加</a-button
        >
      </a-space>
    </a-layout-header>
    <a-layout-content class="content">
      <a-table
        class="ant-table-striped"
        :columns="columns"
        :row-key="(record) => record.ts"
        :data-source="dataSource"
        :loading="loading"
        :row-class-name="
          (_, index) => (index % 2 === 1 ? 'table-striped' : null)
        "
        :pagination="{
          total: total,
          onChange: pageChange,
          defaultPageSize: 5,
        }"
        bordered
      >
        <template #bodyCell="{ column, text, record }">
          <template v-if="column.dataIndex === 'neuron'">
            <a :href="record.nhost" target="_blank">{{ text }}</a>
          </template>
          <template v-if="column.dataIndex === 'operate'">
            <a-button
              size="small"
              type="link"
              @click="showModel('edit', record)"
              disabled
              ><template #icon><edit-outlined /></template>编辑</a-button
            >
          </template>
        </template>
      </a-table>
      <a-modal
        width="25%"
        v-model:visible="visible"
        :title="title"
        :confirm-loading="confirmLoading"
        okText="保存"
        cancelText="取消"
        @ok="submit"
      >
        <template v-if="isEdit">
          <a-row :gutter="16" style="margin-top: 8px">
            <a-col :span="6" style="text-align: left">ID</a-col>
            <a-col :span="18"
              ><a-input :value="editTagVal.ts" size="small" disabled
            /></a-col>
          </a-row>
        </template>
        <a-row :gutter="16" style="margin-top: 8px">
          <a-col :span="6" style="text-align: left">名称</a-col>
          <a-col :span="18"
            ><a-input
              v-model:value="editTagVal.neuron"
              size="small"
              allow-clear
          /></a-col>
        </a-row>
        <a-row :gutter="16" style="margin-top: 8px">
          <a-col :span="6" style="text-align: left">地址</a-col>
          <a-col :span="18">
            <a-input size="small" v-model:value="editTagVal.nhost" allow-clear
          /></a-col>
        </a-row>
      </a-modal>
    </a-layout-content>
  </a-layout>
</template>

<script setup>
import { onMounted, ref } from "vue";
import {
  getPagedTags,
  editTag,
  getNeurons,
  deleteTag,
  editNeuron,
} from "../../utils/tdengineApi";
import { message } from "ant-design-vue";
import {
  SearchOutlined,
  EditOutlined,
  DeleteOutlined,
  ApiOutlined,
  ClearOutlined,
  PlusOutlined,
} from "@ant-design/icons-vue";

const loading = ref(false); // 查询和表格加载
const confirmLoading = ref(false); // 编辑界面提交加载
const loginLoading = ref(false); // 重新登录加载
const dataSource = ref([]); // 数据源
const visible = ref(false); // 控制编辑界面显示
const title = ref(""); // 编辑界面标题
const editTagVal = ref({}); // 编辑界面修改记录
const neuronItems = ref([]); // neuron下拉框选项，查询和编辑界面
const nodeItems = ref([]); // node下拉框选项，查询界面
const groupItems = ref([]); // group下拉框选项，查询界面
const editNodeItems = ref([]); // node下拉框选项，编辑界面
const editGroupItems = ref([]); // group下拉框选项，编辑界面
const editTagItems = ref([]); // tag下拉框选项，编辑界面
const queryField = ref({}); // 查询标签
let flag = true; // 是否是首次打开页面
const total = ref(0);
const current = ref(1);
const isEdit = ref(false);

const columns = [
  {
    title: "ID",
    dataIndex: "ts",
    sorter: (a, b) => new Date(a.ts) - new Date(b.ts),
    width: "30%",
    align: "center",
  },
  {
    title: "名称",
    dataIndex: "neuron",
    width: "25%",
    align: "center",
  },
  {
    title: "地址",
    dataIndex: "nhost",
    width: "25%",
    align: "center",
  },
  {
    title: "操作",
    dataIndex: "operate",
    width: "20%",
    align: "center",
  },
];

onMounted(async () => {
  await query();
});

// 分页查询所有neuron的数据
const query = async (skipCount, resultCount) => {
  if (!skipCount || !resultCount) {
    skipCount = 1;
    resultCount = 5;
  }
  loading.value = true;
  let data = await getNeurons(
    queryField.value.neuron,
    (skipCount - 1) * resultCount,
    resultCount
  );
  dataSource.value = data.data;
  total.value = data.total;
  setTimeout(() => {
    loading.value = false;
  }, 200);
};

// 打开编辑框
const showModel = async (flag, record) => {
  visible.value = true;
  editTagVal.value = {};
  confirmLoading.value = false;
  if (flag === "edit") {
    title.value = "编辑";
    isEdit.value = true;
    editTagVal.value = {
      ts: record.ts,
      neuron: record.neuron,
      nhost: record.nhost,
    };
  } else if (flag === "add") {
    title.value = "添加";
    editTagVal.value.ts = getTimestamp();
    isEdit.value = false;
  }
};

// 提交
const submit = async () => {
  if (
    editTagVal.value.neuron != undefined &&
    editTagVal.value.neuron != "" &&
    editTagVal.value.nhost != undefined &&
    editTagVal.value.nhost != ""
  ) {
    confirmLoading.value = true;
    await editNeuron(editTagVal.value);

    confirmLoading.value = false;
    visible.value = false;
    await query();
  } else {
    message.warn("参数输入不正确");
  }
};

const pageChange = async (page, pageSize) => {
  await query(page, pageSize);
};

// 获取时间戳
const getTimestamp = () => {
  return new Date().getTime().toString();
};
</script>

<style scoped>
.header {
  background: #fff;
  height: 80px;
}

.content {
  height: 100%;
}

.ant-table-striped :deep(.table-striped) td {
  background-color: #d8e3e7;
}
</style>
